<template>
  <el-container>
    <el-header>成绩登记</el-header>
    <!-- <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="学号">
        <el-input v-model="form.sno"></el-input>
      </el-form-item>

      <el-form-item label="课号">
        <el-input v-model="form.cno"></el-input>
      </el-form-item>

      <el-form-item label="成绩">
        <el-input v-model="form.grade"></el-input>
      </el-form-item>
    </el-form> -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-table :data="UserList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="学号" prop="sno"></el-table-column>
        <el-table-column label="姓名" prop="sname"></el-table-column>
        <el-table-column label="所在专业" prop="smajor"></el-table-column>
        <el-table-column label="年级" prop="syear"></el-table-column>
        <el-table-column label="课号" prop="cno"></el-table-column>
        <el-table-column label="课名" prop="cname"></el-table-column>
        <el-table-column label="成绩" prop="grade"></el-table-column>
      </el-table>
    </el-form>
  </el-container>
</template>

<script>
export default {
  created() {
    this.getUserList();
  },
  data() {
    return {
      form: {},
      query: {
        cno: "",
        cname: ""
      },
      UserList: [],
      total: 0
    }
  },
  methods: {

    //接口调用后端数据
    async getUserList() {
      const _this = this;
      this.$axios.post("http://localhost:8081/abc", this.query).then(res => {
        //const token = res.headers["authorization"];
        console.log(res.data);
        this.UserList = res.data;
        //this.total = res.number;
      });
    }
  }
};
</script>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
  font-size: 40px;
}
</style>